<!-- 物资签收 -->
<template>
	<view class="sign-container">
		<z-paging ref="paging" v-model="checkList" @query="queryList">
			<view slot="top" class="inner-top">
				<!-- <view class="input-view"> -->
				<!-- 	<uni-search-bar class="uni-mt-10" radius="5" v-model="form.batchNumber" placeholder="请输入"
					clearButton="auto" cancelButton="none" @confirm="confirm" @clear="clearInput" /> -->
				<uni-nav-bar>
					<block slot="left">

					</block>

					<view class="input-view">
						<uni-icons class="input-uni-icon" type="search" size="18" color="#999" />
						<uni-easyinput v-model="form.batchNumber" placeholder="请输入批次编号"></uni-easyinput>
					</view>

					<block slot="right">
						<view class="city" @click="searchBtn">
							搜索
						</view>
					</block>
				</uni-nav-bar>



				<!-- 筛选签收/未签收 -->
				<view class="tab-custom">
					<view v-for="(item, index) in tabList" :key="item.value" @click="tabChange(item.value)"
						class="list">
						<view class="primary" :class="currentTab == item.value ? 'active' : ''">
							<text class="label">{{item.cate_name}}</text>
						</view>
					</view>
				</view>

			</view>


			<!-- 审查项 -->
			<view class="check" v-for="(item) in checkList" :key="item.id">
				<uni-list :border="false" class="list-view-item">
					<uni-list-item title="发放批次编号" :rightText="item.batchNumber" :arrow="false"></uni-list-item>
					<uni-list-item title="发放部门名称" :rightText="item.deptName" :arrow="false"></uni-list-item>
					<uni-list-item title="发放物资名称" :rightText="item.applianceName" :arrow="false"></uni-list-item>
					<uni-list-item title="数量单位" :rightText="item.itemUnitTypeName" :arrow="false"></uni-list-item>
					<uni-list-item title="每人发放数量" :rightText="`${item.quantityPerPerson}`" :arrow="false">
					</uni-list-item>
					<uni-list-item title="签收日期" :rightText="item.lodgmentDate" :arrow="false"></uni-list-item>
					<uni-list-item title="有效状态" :rightText="`${item.status}`" :arrow="false">
						<template v-slot:footer>
							<view class="slot-status" v-if="item.status == 0">有效</view>
							<view class="slot-status" v-if="item.status == 1">预警</view>
							<view class="slot-status" v-if="item.status == 2">过期</view>
						</template>

					</uni-list-item>
					<uni-list-item title="签字" :arrow="false">
						<template v-slot:footer>
							<image class="slot-image" :src="item.fileInfoList[0].url" mode="scaleToFill"></image>
							<!-- <text>{{item.fileInfoList[0].url}}</text> -->
						</template>
					</uni-list-item>
					<uni-list-item title="" :arrow="false" v-if="form.issue == 1">
						<template v-slot:footer>
							<button @click="signBtn(item)" type="primary" size="mini">签收</button>
						</template>

					</uni-list-item>
				</uni-list>

			</view>
		</z-paging>
		<!-- 查看详情 -->
		<u-popup v-model="show" mode="left" width="100%" height="600px">
			<view class="detail">
				<view class="nav-header">
					<view class="nav-left-btn" @click="back">
						< </view>
							<view class="nav-header-title">
								<text class="title">
									查看
								</text>
							</view>
							<view class="nav-right-btn">

							</view>
					</view>
					<!-- 正文内容 -->
					<u-table ref="table" :loading="loading" border stripe type="selection" emptyText="暂无更多数据"
						@selection-change="selectionChange">
						<u-tr class="u-tr">
							<u-th class="u-td">姓名</u-th>
							<u-th class="u-td"> 是否签收</u-th>
							<u-th class="u-td">有效日期</u-th>
							<u-th class="u-td">是否有效</u-th>
						</u-tr>
						<u-tr v-for="(item, index) in tableData" :key="index" class="u-tr">
							<uni-td class="u-td">{{ item.name }}</uni-td>
							<uni-td class="u-td">
								{{ item.isSign }}
							</uni-td>
							<uni-td class="u-td">{{ item.date }}</uni-td>
							<uni-td class="u-td">
								{{ item.isEffective }}
							</uni-td>
						</u-tr>
					</u-table>
					<view class="uni-pagination-box"><uni-pagination show-icon :page-size="pageSize"
							:current="pageCurrent" :total="total" @change="change" /></view>
				</view>
		</u-popup>

		<!-- 发放弹窗 -->
		<uni-popup ref="popup" type="center" width="100%" background-color="#fff" height="600px">
			<uni-nav-bar title="签字"></uni-nav-bar>
			<view style="width: 750rpx ;height: 500rpx;">
				<jp-signature ref="signatureRef"></jp-signature>
			</view>
			<view>
				<button @click="clear">清空</button>
				<button @click="undo">撤消</button>
				<button @click="save">保存</button>
			</view>
			</u-form>
		</uni-popup>
	</view>
</template>

<script>
	import {
		listAllShoot,
		addAllShoot,
		editAllShoot,
		deleteAllShoot,
		detailAllShoot,
		submitAllShoot
	} from "@/api/laobao/index.js";
	import {
		editSign
	} from "@/api/riskLevel/personalSign.js";
	import {
		listSign
	} from "@/api/laobao/index.js"
	import {
		reqUpload
	} from "@/api/tool/file.js";

	export default {
		props: {
			activeMenu: {
				type: Number
			}
		},
		components: {

		},
		onReachBottom() {
			console.log("触底操作")
		},
		data() {
			return {
				//用品签收-查询参数
				form: {
					issue: '2',
					pageSize: 10,
					pageNum: 1
				},
				queryForm:{},
				//===
				tabList: [{
					cate_name: '签收',
					value: 2
				}, {
					cate_name: '未签收',
					value: 1
				}],
				nowId: "",
				//签字图片的url
				url: '',
				currentTab: 2,
				//===
				userShow: false,
				deptShow: false,

				actionSheetList: [{
						text: '男'
					},
					{
						text: '女'
					},
					{
						text: '保密'
					}
				],
				tableData: [],
				searchVal: '',
				//发放弹窗
				grantShow: false,
				// 每页数据量
				pageSize: 10,
				// 当前页
				pageCurrent: 1,
				// 数据总量
				total: 0,
				loading: false,
				background: {
					backgroundColor: '#b8d8ff',
				},
				show: false,
				showRight: false,
				localRes: {},
				list: [],
				current: 0,
				checkList: []
			}
		},
		methods: {
			//搜索按钮
			searchBtn(){
				this.getList()
			},
			//保存
			save() {
				let config = require('@/config.js')
				this.$refs.signatureRef.canvasToTempFilePath({
					success: async (res) => {
						// 是否为空画板 无签名
						console.log(res.isEmpty)
						// 生成图片的临时路径
						// H5 生成的是base64
						if (res.isEmpty == false) {
							this.url = res.tempFilePath
							let blob = this.dataURLtoBlob(res.tempFilePath);
							// 拿到文件名
							let fileName = "电子签名.jpg";

							// 2，在转为 file类型
							let file = this.blobToFile(blob, fileName);
							const formData = new FormData();
							formData.append("file", file);
							console.log("formadata", formData)


							uni.uploadFile({
								url: `${config.baseUrl}/common/upload`,
								header: {
									'Authorization': 'Bearer ' + uni.getStorageSync(
										'App-Token') //请求头信息
								},
								filePath: res.tempFilePath,
								name: 'file',
								success: (res) => {
									let response = JSON.parse(res.data)
									response.type = "54"
									response.fileId = response.id

									delete response.code
									delete response.msg
									delete response.systemTime
									delete response.originalFilename

									let query = {
										fileInfoList: [response],
										id: this.nowId
									}
									// @params  status: 状态判断上传文件穿什么type

									editSign(query).then(() => {

										this.tabChange(1)
										uni.showToast({
											title: `确认成功`,
										});
									})



									this.$refs.popup.close()

								}
							})
						}

						// console.log("res.tempFilePath", res.tempFilePath)
					}
				})
			},
			//清楚
			clear() {
				this.$refs.signatureRef.clear()
			},
			//撤销按钮
			undo() {
				this.$refs.signatureRef.undo()
			},
			//1,先将base64转换为blob
			dataURLtoBlob(baseurl) {
				var arr = baseurl.split(","),
					mime = arr[0].match(/:(.*?);/)[1],
					bstr = atob(arr[1]),
					n = bstr.length,
					u8arr = new Uint8Array(n);
				while (n--) {
					u8arr[n] = bstr.charCodeAt(n);
				}
				return new Blob([u8arr], {
					type: mime
				});
			},
			//2,再将blob转换为file
			blobToFile(theBlob, fileName) {
				theBlob.lastModifiedDate = new Date(); // 文件最后的修改日期
				theBlob.name = fileName; // 文件名
				return new File([theBlob], fileName, {
					type: theBlob.type,
					lastModified: Date.now(),
				});
			},
			//查看按钮
			async handleView(row) {
				let query = {
					releaseId: row.id
				}
				console.log("查看的", row)
				let res = await listSign(query)
				this.tableData = res.rows
				this.show = true
			},
			//tabs切换
			async tabChange(index) {
				this.currentTab = index
				this.form.issue = index
				uni.showLoading({
					title: "加载中"
				})
				this.$refs.paging.reload()
				let res = await listSign(this.form)
				this.checkList = res.rows
				uni.hideLoading()

			},
			userSheetCallback(index) {
				this.form.name = this.userList[index].text;
			},
			deptNameSheetCallback(index) {
				this.form.name = this.deptList[index].text;
			},
			// 点击actionSheet回调
			actionSheetCallback(index) {
				// if (index == 2) {
				this.form.sex = this.actionSheetList[index].text;
			},

			// @query所绑定的方法不要自己调用！！需要刷新列表数据时，只需要调用this.$refs.paging.reload()即可
			async queryList(pageNo, pageSize) {
				// 此处请求仅为演示，请替换为自己项目中的请求
				let query = {
					pageNum: pageNo,
					pageSize: pageSize,
					userId: this.localRes.userId,
					issue: this.form.issue

				}
				let res = await listSign(query)
				// this.$request.listGrantsManage({ pageNo,pageSize }).then(res => {
				// 将请求结果通过complete传给z-paging处理，同时也代表请求结束，这一行必须调用
				let list = res.rows
				this.$refs.paging.complete(list);
				// }).catch(res => {
				// 如果请求失败写this.$refs.paging.complete(false)，会自动展示错误页面
				// 注意，每次都需要在catch中写这句话很麻烦，z-paging提供了方案可以全局统一处理
				// 在底层的网络请求抛出异常时，写uni.$emit('z-paging-error-emit');即可
				// 	this.$refs.paging.complete(false);
				// })
			},
			// 获取签收数据
			async getList() {
				uni.showLoading({
					title: "加载中"
				})
				this.localRes = uni.getStorageSync("userInfo")

				this.form.userId = this.localRes.userId
				let res = await listSign(this.form)
				this.checkList = res.rows
				uni.hideLoading()
			},
			/** 签收按钮 */
			signBtn(row) {
				this.nowId = row.id
				this.$refs.popup.open()
			},
			//返回
			back() {
				this.show = false
			},
			backTwo() {

				this.$refs.popup.close()
			},
			// 多选处理
			selectedItems() {
				return this.selectedIndexs.map(i => this.tableData[i])
			},
			// 多选
			selectionChange(e) {
				console.log(e.detail.index)
				this.selectedIndexs = e.detail.index
			},
			//批量删除
			delTable() {
				console.log(this.selectedItems())
			},
			// 分页触发
			change(e) {
				this.$refs.table.clearSelection()
				this.selectedIndexs.length = 0
				this.getData(e.current)
			},
			// 搜索
			search() {
				this.getData(1, this.searchVal)
			},
			// 获取数据
			getData(pageCurrent, value = '') {
				this.loading = true
				this.pageCurrent = pageCurrent
				this.request({
					pageSize: this.pageSize,
					pageCurrent: pageCurrent,
					value: value,
					success: res => {
						// console.log('data', res);
						this.tableData = res.data
						this.total = res.total
						this.loading = false
					}
				})
			},
			// 伪request请求
			request(options) {
				const {
					pageSize,
					pageCurrent,
					success,
					value
				} = options
				let total = tableData.length
				let data = tableData.filter((item, index) => {
					const idx = index - (pageCurrent - 1) * pageSize
					return idx < pageSize && idx >= 0
				})
				if (value) {
					data = []
					tableData.forEach(item => {
						if (item.name.indexOf(value) !== -1) {
							data.push(item)
						}
					})
					total = data.length
				}

				setTimeout(() => {
					typeof success === 'function' &&
						success({
							data: data,
							total: total
						})
				}, 500)
			},

			//打开窗口
			showDrawer() {
				console.log("窗口", )
				this.$refs.showRight.open()
			},
			// 关闭窗口
			closeDrawer(e) {
				this.$refs[e].close()
			},
			//清除数据
			clearInput(e) {

				this.form.batchNumber = ""
				this.getList()
			},
			confirm(e) {
				console.log("点击按钮搜索", e)
				this.form.batchNumber = e.value
				this.getList()
				// uni.showToast({
				// 	title: '搜索'
				// })
			}
		},
		mounted() {
			this.getList()
		}
	}
</script>

<style lang="scss" scoped>
	.sign-container {
		$nav-height: 30px;

		::v-deep {
			.uni-navbar {
				.uni-navbar--border {
					background-color: transparent !important;
					border-bottom: none !important;

					.uni-navbar__header {
						background-color: transparent !important;

						.uni-navbar__header-btns-left {
							width: 0 !important;
						}

						.uni-navbar__header-btns-right {
							.city {
								color: #137EE9;
								font-size: 18px;
								font-weight: 400;
							}
						}
					}
				}
			}
		}

		.z-paging-content-fixed {
			top: 214rpx !important;
		}

		.inner-top {
			width: 100%;
			height: 150rpx;
			padding: 0 24rpx;
			background: linear-gradient(360deg, #fbfbfb 10%, #B8D7FF 100%);
		}

		.check {
			margin-bottom: 20rpx;
			padding: 20rpx;
			background: #ffffff;
			border-radius: 16rpx;

			.uni-list {
				box-shadow: 3px 3px 5px 2px rgba(222, 222, 222, 0.5);

				.uni-list-item {
					.slot-image {
						width: 80px !important;
						height: 70px;
					}
				}
			}

			.slot-status {
				color: #999;
				font-size: 22rpx;
			}
		}

		::v-deep {
			.add-btn {
				width: 100%;
				height: 175rpx;
				border: 2rpx dashed #C5C8CE;

				.middle-font {
					display: flex;
					justify-content: center;
					align-items: center;
					height: 100%;

					.label {
						color: #808695;
					}
				}
			}

			.tab-custom {
				width: 240rpx;
				display: flex;
				justify-content: space-between;

				.list {
					display: flex;
					flex: 1;
					justify-content: center;
					overflow: hidden;

					.primary {
						.label {
							font-weight: 400;
							font-size: 24rpx;
							color: #17233D;
						}
					}

					.active {
						.label {
							height: 44rpx;
							line-height: 44rpx;
							font-weight: 600;
							font-size: 26rpx;
							color: #17233D;
						}
					}
				}
			}

			.check {
				background-color: #fff;
				margin: 12rpx 0;

				.btn {
					text-align: right;
					margin: 12rpx;

					.view-btn {
						margin-right: 8rpx;
					}
				}
			}

			.detail {
				width: 100vw;
				height: 100vh;
				background: linear-gradient(180deg, #B8D7FF 0%, rgba(202, 231, 255, 0) 100%);

				/* 确保导航栏在顶部 */
				.nav-header {
					color: rgb(51, 51, 51);
					background-color: transparent;
					height: 154rpx;
					display: flex;
					padding: 0 10px;
					flex-direction: row;

					.nav-left-btn {
						display: flex;
						width: 60px;
						justify-content: flex-start;
						align-items: center;
						color: #666666;
					}

					.nav-header-title {
						display: flex;
						flex: 1;
						flex-direction: row;
						align-items: center;
						justify-content: center;
						padding: 0 10px;
						overflow: hidden;

						.title {
							font-weight: 600;
							font-size: 32rpx;
							color: #17233D;
						}
					}

					.nav-right-btn {
						display: flex;
						width: 60px;
						justify-content: flex-end;
						align-items: center;
					}
				}
			}

			.uni-card {
				.uni-card__header {
					border: none;
				}

				.uni-card__content {
					.uni-group__content {
						padding: 0;
					}

				}
			}
		}

		.input-view {
			/* #ifndef APP-PLUS-NVUE */
			display: flex;
			/* #endif */
			flex-direction: row;
			// width: 500rpx;
			flex: 1;
			background-color: #f8f8f8;
			height: $nav-height;
			border-radius: 15px;
			padding: 0 15px;
			flex-wrap: nowrap;
			margin: 7px 0;
			line-height: $nav-height;
		}

		::v-deep {
			.is-input-border {
				border: none;
				background-color: transparent !important;
			}
		}

		.input-uni-icon {
			line-height: $nav-height;
		}

		.nav-bar-input {
			height: $nav-height;
			line-height: $nav-height;
			/* #ifdef APP-PLUS-NVUE */
			width: 370rpx;
			/* #endif */
			padding: 0 5px;
			font-size: 12px;
			background-color: #f8f8f8;
		}
	}
</style>